<template>
  <div>
    <vxe-table
                ref="mytable"
                border
                align="center"
                :data="tableDataFirst"
                :resizable="true"
                auto-resize
                :scroll-y="{enabled:false}"
                v-loading="loading"
                style="width: 100%; margin-top: 10px; overflow: auto"
                highlight-current-row
                :span-method="arraySpanMethod"
              >
              <vxe-colgroup title="项目" header-class-name="customer-span">
                    <vxe-column field="name" title="项目" style="display:none" header-class-name="headerHiddn"></vxe-column>
                    <vxe-column field="cultivateType" width="200" title="子节点" style="display:none" header-class-name="headerHiddn"></vxe-column>
              </vxe-colgroup>
               
                <vxe-column field="code" title="代码"></vxe-column>
                <vxe-column field="totalNumber" title="总计" width="100"></vxe-column>
                <vxe-colgroup>
                  <vxe-column field="females" title="女"></vxe-column>
                  <vxe-column field="numberOfEthnicMinority" title="少数名族"></vxe-column>
                  <vxe-column field="nonPartyPersons" title="非中共党员"></vxe-column>
                  <vxe-column field="dr" title="博士"></vxe-column>
                  <vxe-column field="master" title="硕士"></vxe-column>
                  <vxe-column field="bachelor" title="学士"></vxe-column>
                  <vxe-column
                    field="isTwoYearGrassRoot"
                    title="具有2年以上基层工作经验"
                  ></vxe-column>
                  <vxe-column
                    field="qygxkyLeader"
                    title="有企业、高校、科研院所正职领导任职经历"
                  ></vxe-column>
                  <vxe-column field="isGjzc" title="高级职称"></vxe-column>
                  <vxe-column field="isLlpx" title="参加理论培训"></vxe-column>
                  <vxe-colgroup>
                    
                    <vxe-column field="isCgpx" title="出国出境培训"></vxe-column>
                  </vxe-colgroup>

                  <vxe-colgroup title="实践锻炼">
                    <vxe-column field="isBdwlg" title="本单位岗位轮换"></vxe-column>
                    <vxe-column field="isJlrz" title="交流任职"></vxe-column>
                    <vxe-column field="isGzdl" title="挂职锻炼"></vxe-column>
                  </vxe-colgroup>

                  <vxe-column field="isJqtbsy" title="近期可提拔使用"></vxe-column>
                </vxe-colgroup>
                <vxe-colgroup title="最高学历">
                  <vxe-column field="zgYjs" title="研究生"></vxe-column>
                  <vxe-column field="zgBk" title="大学本科"></vxe-column>
                  <vxe-column field="zgZk" title="大学专科"></vxe-column>
                  <vxe-column field="zgZzyx" title="中专及以下"></vxe-column>
                </vxe-colgroup>
                <vxe-colgroup  title="全日制学历">
                  <vxe-column field="qrzYjs" title="研究生"></vxe-column>
                  <vxe-column field="qrzBk" title="大学本科"></vxe-column>
                  <vxe-column field="qrzZk" title="大学专科"></vxe-column>
                  <vxe-column field="qrzZzyx" title="中专及以下"></vxe-column>
                </vxe-colgroup>



              </vxe-table>


<!-- 第二个表格 -->
              <vxe-table
                ref="mytable"
                border
                align="center"
                :data="tableDataSecond"
                v-loading="loading"
                style="width: 100%; margin-top: 10px; overflow: auto"
                :height="heightVxe"
                highlight-current-row
                :span-method="arraySpanMethodSecod"
              >
                <vxe-colgroup title="项目" header-class-name="customer-span">
                      <vxe-column field="name" title="项目" style="display:none" header-class-name="headerHiddn" width="100"></vxe-column>
                      <vxe-column field="cultivateType" width="200" title="子节点" style="display:none" header-class-name="headerHiddn"></vxe-column>
                </vxe-colgroup>
                <vxe-column type="seq" title="代码" width="80"></vxe-column>
                <vxe-column field="30age" title="30岁及以下" width="80"></vxe-column>
                <vxe-column field="31age" title="31岁" width="80" ></vxe-column>
                <vxe-column field="32age" title="32岁" width="80"></vxe-column>
                <vxe-column field="33age" title="33岁" width="80"></vxe-column>
                <vxe-column field="34age" title="34岁" width="80"></vxe-column>
                <vxe-column field="35age" title="35岁" width="80"></vxe-column>
                <vxe-column field="36age" title="36岁" width="80"></vxe-column>
                <vxe-column field="37age" title="37岁" width="80"></vxe-column>
                <vxe-column field="38age" title="38岁" width="80"></vxe-column>
                <vxe-column field="39age" title="39岁" width="80"></vxe-column>
                <vxe-column field="40age" title="40岁" width="80"></vxe-column>
                <vxe-column field="41age" title="41岁" width="80"></vxe-column>
                <vxe-column field="42age" title="42岁" width="80"></vxe-column>
                <vxe-column field="43age" title="43岁" width="80"></vxe-column>
                <vxe-column field="44age" title="44岁" width="80"></vxe-column>
                <vxe-column field="45age" title="45岁" width="80"></vxe-column>
                <vxe-column field="46age" title="46岁" width="80"></vxe-column>
                <vxe-column field="47age" title="47岁" width="80"></vxe-column>
                <vxe-column field="48age" title="48岁" width="80"></vxe-column>
                <vxe-column field="49age" title="49岁" width="80"></vxe-column>
                
              </vxe-table>


              <!-- 第三个表格 -->
              <vxe-table
                ref="mytable"
                border
                align="center"
                :data="tableDataSecond"
                v-loading="loading"
                style="width: 100%; margin-top: 10px; overflow: auto"
                :height="heightVxe"
                highlight-current-row
                :span-method="arraySpanMethodSecodTwo"
              >
                <vxe-colgroup title="项目" header-class-name="customer-span">
                      <vxe-column field="name" title="项目" style="display:none" header-class-name="headerHiddn"></vxe-column>
                      <vxe-column field="cultivateType" width="200" title="子节点" style="display:none" header-class-name="headerHiddn"></vxe-column>
                </vxe-colgroup>
                <vxe-column type="seq" title="代码"></vxe-column>
                <vxe-column field="50age" title="50岁"  width="80"></vxe-column>
                <vxe-column field="51age" title="51岁"  width="80" ></vxe-column>
                <vxe-column field="52age" title="52岁"  width="80"></vxe-column>
                <vxe-column field="53age" title="53岁"  width="80"></vxe-column>
                <vxe-column field="54age" title="54岁"  width="80"></vxe-column>
                <vxe-column field="55age" title="55岁"  width="80"></vxe-column>
                <vxe-column field="56age" title="56岁"  width="80"></vxe-column>
                <vxe-column field="57age" title="57岁"  width="80"></vxe-column>
                <vxe-column field="58age" title="58岁"  width="80"></vxe-column>
                <vxe-column field="59age" title="59岁"  width="80"></vxe-column>
                <vxe-column field="60age" title="60岁"  width="80"></vxe-column>
                <vxe-column field="61age" title="61岁"  width="80"></vxe-column>
                <vxe-column field="62age" title="62岁"  width="80"></vxe-column>
                <vxe-column field="63age" title="63岁"  width="80"></vxe-column>
                <vxe-column field="64age" title="64岁"  width="80"></vxe-column>
                <vxe-column field="65age" title="65岁"  width="80"></vxe-column>
                <vxe-column field="66age" title="66岁及以上"  width="100"></vxe-column>
                <vxe-column field="total" title="年龄总数"  width="80"></vxe-column>
                <vxe-column field="avgTotal" title="平均年龄(岁)"  width="100"></vxe-column>               
              </vxe-table>



              <!-- 第四个表格 -->
              <vxe-table
                ref="mytable"
                border
                align="center"
                :data="tableDataThird"
                :resizable="true"
                auto-resize
                :scroll-y="{enabled: false}"
                v-loading="loading"
                style="width: 100%; margin-top: 10px; overflow: auto"
                highlight-current-row
                :span-method="arraySpanMethodAmount"
              >
                <vxe-colgroup title="项目" header-class-name="customer-span">
                      <vxe-column field="name" title="项目" style="display:none" header-class-name="headerHiddn"></vxe-column>
                      <vxe-column field="cultivateType" width="200" title="子节点" style="display:none" header-class-name="headerHiddn"></vxe-column>
                </vxe-colgroup>
                <vxe-column type="seq" title="代码"></vxe-column>
                  <vxe-column
                    field="lastNumber"
                    title="上年末总数"
                    width="100"
                    style="border-top: none"
                  ></vxe-column>
                  <vxe-column field="nowNumber" title="本年新列入优秀年轻干部名单"></vxe-column>
                  <vxe-colgroup title="本年提拔使用">
                    <vxe-colgroup>
                      <vxe-column field="total" title="合计"></vxe-column>
                      <vxe-column field="females" title="女"></vxe-column>
                      <vxe-column field="numberOfEthnicMinority" title="少数民族"></vxe-column>
                      <vxe-column field="nonPartyPersons" title="非中共党员"></vxe-column>
                      <vxe-column field="yjs" title="研究生"></vxe-column>
                      <vxe-column field="bk" title="大学本科"></vxe-column>
                      <vxe-colgroup>
                        <vxe-column field="fortyAge" title="40岁及以下"></vxe-column>
                        <vxe-column field="thirtyFiveAge" title="35岁及以下"></vxe-column>
                      </vxe-colgroup>
                      <vxe-column field="jltb" title="交流提拔"></vxe-column>
                    </vxe-colgroup>
                  </vxe-colgroup>
                  <vxe-column field="outNumber" title="因故调整出优秀年轻干部名单"></vxe-column>
                  <vxe-column field="differenceNumber" title="本年末应有数"></vxe-column>
                  <vxe-column field="fluctuateNumber" title="本年末实有数"></vxe-column>
                  <vxe-column field="shouldNumber" title="实有数与应有数之差"></vxe-column>
                  <vxe-column field="realityNumber" title="本年度增减数"></vxe-column>
              </vxe-table>
  </div>
</template>

<script>
// import {getFirstTable,getSecondTable,getThirdTable,getSyncZtbb,getExportTable} from '@/api/young/echarts/cadre/cadreNew'
// import { getItemTreeNew } from '@/api/young/system/dictionary/dictionary.js'
export default {
  data() {
    return {
      tableDataFirst: [],
      tableDataSecond:[],
      tableDataThird:[],
      heightY: window.innerHeight - 130 + "px",
      activeTab: "first",
      heightTab: window.innerHeight - 132 + "px",
      loading: false,
      heightVxe: window.innerHeight - 185 + "px",
    };
  },
  created(){
    this.getFirstTable();
    this.getSecondTable();
    this.getThirdTable();
  },
  methods: {
    
    handleClick() {
      if(this.activeTab === 'first'){
        this.getFirstTable();
      }else if(this.activeTab === 'secondOne' && this.activeTab === 'secondTwo'){
        this.getSecondTable();
      }else if(this.activeTab === "third"){
        this.getThirdTable();
      }  
    },
    handlerClickSync(){
      this.loading = true;
      getSyncZtbb().then((result) =>{
        if(result.result){
          this.$message({
          message: '同步成功',
          type: 'success'
        });
          this.loading = false;
        }
      })
    },
    getFirstTable(){
      const params = {}
      const e = {
          'dataCode': 'CULTIVATE_TYPE' // 代码类型
      }
      getItemTreeNew(e).then((data) => {
        getFirstTable(params).then((result) =>{
             result.resultdata.forEach((item)=>{
                if(item.cultivateType === "01"){
                    item.cultivateType = data.resultdata[0].itemName;
                }else if(item.cultivateType === "02"){
                  item.cultivateType = data.resultdata[1].itemName;
                }else if(item.cultivateType === "03"){
                  item.cultivateType = data.resultdata[2].itemName;
                }else if(item.cultivateType === "04"){
                  item.cultivateType = data.resultdata[3].itemName;
                }else if(item.cultivateType === "05"){
                  item.cultivateType = data.resultdata[4].itemName;
                }else if(item.cultivateType === "06"){
                  item.cultivateType = data.resultdata[5].itemName;
                }else if(item.cultivateType === "07"){
                  item.cultivateType = data.resultdata[6].itemName;
                }else if(item.cultivateType === "08"){
                  item.cultivateType = data.resultdata[7].itemName;
                }else if(item.cultivateType === "09"){
                  item.cultivateType = data.resultdata[8].itemName;
                }else if(item.cultivateType === "10"){
                  item.cultivateType = data.resultdata[9].itemName;
                }else if(item.cultivateType === "11"){
                  item.cultivateType = data.resultdata[10].itemName;
                }else if(item.cultivateType === "12"){
                  item.cultivateType = data.resultdata[11].itemName;
                }else if(item.cultivateType === "13"){
                  item.cultivateType = data.resultdata[12].itemName;
                }else if(item.cultivateType === "14"){
                  item.cultivateType = data.resultdata[13].itemName;
                }else if(item.cultivateType === "15"){
                  item.cultivateType = data.resultdata[14].itemName;
                }
             })
            this.tableDataFirst = result.resultdata;
        })
      })
    },
    getSecondTable(){
      const params = {}
      const e = {
          'dataCode': 'CULTIVATE_TYPE' // 代码类型
      }
      getItemTreeNew(e).then((data) => {
        getSecondTable(params).then((result) =>{
             result.resultdata.forEach((item)=>{
                if(item.cultivateType === "01"){
                    item.cultivateType = data.resultdata[0].itemName;
                }else if(item.cultivateType === "02"){
                  item.cultivateType = data.resultdata[1].itemName;
                }else if(item.cultivateType === "03"){
                  item.cultivateType = data.resultdata[2].itemName;
                }else if(item.cultivateType === "04"){
                  item.cultivateType = data.resultdata[3].itemName;
                }else if(item.cultivateType === "05"){
                  item.cultivateType = data.resultdata[4].itemName;
                }else if(item.cultivateType === "06"){
                  item.cultivateType = data.resultdata[5].itemName;
                }else if(item.cultivateType === "07"){
                  item.cultivateType = data.resultdata[6].itemName;
                }else if(item.cultivateType === "08"){
                  item.cultivateType = data.resultdata[7].itemName;
                }else if(item.cultivateType === "09"){
                  item.cultivateType = data.resultdata[8].itemName;
                }else if(item.cultivateType === "10"){
                  item.cultivateType = data.resultdata[9].itemName;
                }else if(item.cultivateType === "11"){
                  item.cultivateType = data.resultdata[10].itemName;
                }else if(item.cultivateType === "12"){
                  item.cultivateType = data.resultdata[11].itemName;
                }else if(item.cultivateType === "13"){
                  item.cultivateType = data.resultdata[12].itemName;
                }else if(item.cultivateType === "14"){
                  item.cultivateType = data.resultdata[13].itemName;
                }else if(item.cultivateType === "15"){
                  item.cultivateType = data.resultdata[14].itemName;
                }
             })
            this.tableDataSecond = result.resultdata;
        })
      })
    },
    getThirdTable(){
      const params = {}
      const e = {
          'dataCode': 'CULTIVATE_TYPE' // 代码类型
      }
      getItemTreeNew(e).then((data) => {
        getThirdTable(params).then((result) =>{
             result.resultdata.forEach((item)=>{
                if(item.cultivateType === "01"){
                    item.cultivateType = data.resultdata[0].itemName;
                }else if(item.cultivateType === "02"){
                  item.cultivateType = data.resultdata[1].itemName;
                }else if(item.cultivateType === "03"){
                  item.cultivateType = data.resultdata[2].itemName;
                }else if(item.cultivateType === "04"){
                  item.cultivateType = data.resultdata[3].itemName;
                }else if(item.cultivateType === "05"){
                  item.cultivateType = data.resultdata[4].itemName;
                }else if(item.cultivateType === "06"){
                  item.cultivateType = data.resultdata[5].itemName;
                }else if(item.cultivateType === "07"){
                  item.cultivateType = data.resultdata[6].itemName;
                }else if(item.cultivateType === "08"){
                  item.cultivateType = data.resultdata[7].itemName;
                }else if(item.cultivateType === "09"){
                  item.cultivateType = data.resultdata[8].itemName;
                }else if(item.cultivateType === "10"){
                  item.cultivateType = data.resultdata[9].itemName;
                }else if(item.cultivateType === "11"){
                  item.cultivateType = data.resultdata[10].itemName;
                }else if(item.cultivateType === "12"){
                  item.cultivateType = data.resultdata[11].itemName;
                }else if(item.cultivateType === "13"){
                  item.cultivateType = data.resultdata[12].itemName;
                }else if(item.cultivateType === "14"){
                  item.cultivateType = data.resultdata[13].itemName;
                }else if(item.cultivateType === "15"){
                  item.cultivateType = data.resultdata[14].itemName;
                }
             })
            this.tableDataThird = result.resultdata;
        })
      })
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (column.property === "name") {
        if (columnIndex === 0) {
          if (rowIndex === 1) {
              var elements = document.getElementsByClassName("vxe-body--column col_3 col--center");
              // console.log(elements,"elements")
              for (var i = 0; i < elements.length; i++) {
                 elements[0].textContent = "正地厅级单位";
              }
              return { rowspan: 4, colspan: 1 };
          } else if (rowIndex === 5) {
              var elements = document.getElementsByClassName("vxe-body--column col_3 col--center");
              for (var i = 0; i < elements.length; i++) {
              elements[1].textContent = "副地厅级单位";
              }
              return { rowspan: 6, colspan: 1 };
          } else if (rowIndex === 11) {
              var elements = document.getElementsByClassName("vxe-body--column col_3 col--center");
              for (var i = 0; i < elements.length; i++) {
                elements[2].textContent = "正县处级单位";
              }
              
              return { rowspan: 4, colspan: 1 };
          } else {
            return { rowspan: 1, colspan: 0 };
          }
        }
      }

      if(column.property === 'cultivateType'){
        if (columnIndex === 1) {
          if (rowIndex === 0 && row.cultivateType ==="可作为副省级城市党政副职培养的干部") {
            return {rowspan:1,colspan:2}
          }
        }
      }
      let elArr = document.querySelectorAll('.customer-span');
        elArr.forEach((el) => {
            el.setAttribute('rowspan', 3);
      });
    },
    arraySpanMethodSecod({ row, column, rowIndex, columnIndex }) {
      if (column.property === "name") {
        if (columnIndex === 0) {
          if (rowIndex === 1) {
              var elements = document.getElementsByClassName("vxe-body--column col_37 col--center");
              // console.log(elements,"elements")
              for (var i = 0; i < elements.length; i++) {
                 elements[0].textContent = "正地厅级单位";
              }
              return { rowspan: 4, colspan: 1 };
          } else if (rowIndex === 5) {
              var elements = document.getElementsByClassName("vxe-body--column col_37 col--center");
              for (var i = 0; i < elements.length; i++) {
              elements[1].textContent = "副地厅级单位";
              }
              return { rowspan: 6, colspan: 1 };
          } else if (rowIndex === 11) {
              var elements = document.getElementsByClassName("vxe-body--column col_37 col--center");
              for (var i = 0; i < elements.length; i++) {
                elements[2].textContent = "正县处级单位";
              }
              
              return { rowspan: 4, colspan: 1 };
          } else {
            return { rowspan: 1, colspan: 0 };
          }
        }
      }

      if(column.property === 'cultivateType'){
        if (columnIndex === 1) {
          if (rowIndex === 0 && row.cultivateType ==="可作为副省级城市党政副职培养的干部") {
            return {rowspan:1,colspan:2}
          }
        }
      }
      let elArr = document.querySelectorAll('.customer-span');
        elArr.forEach((el) => {
            el.setAttribute('rowspan', 4);
      });
    },
    arraySpanMethodSecodTwo({ row, column, rowIndex, columnIndex }) {
      if (column.property === "name") {
        if (columnIndex === 0) {
          if (rowIndex === 1) {
              var elements = document.getElementsByClassName("vxe-body--column col_62 col--center");
              // console.log(elements,"elements")
              for (var i = 0; i < elements.length; i++) {
                 elements[0].textContent = "正地厅级单位";
              }
              return { rowspan: 4, colspan: 1 };
          } else if (rowIndex === 5) {
              var elements = document.getElementsByClassName("vxe-body--column col_62 col--center");
              for (var i = 0; i < elements.length; i++) {
              elements[1].textContent = "副地厅级单位";
              }
              return { rowspan: 6, colspan: 1 };
          } else if (rowIndex === 11) {
              var elements = document.getElementsByClassName("vxe-body--column col_62 col--center");
              for (var i = 0; i < elements.length; i++) {
                elements[2].textContent = "正县处级单位";
              }
              
              return { rowspan: 4, colspan: 1 };
          } else {
            return { rowspan: 1, colspan: 0 };
          }
        }
      }

      if(column.property === 'cultivateType'){
        if (columnIndex === 1) {
          if (rowIndex === 0 && row.cultivateType ==="可作为副省级城市党政副职培养的干部") {
            return {rowspan:1,colspan:2}
          }
        }
      }
      let elArr = document.querySelectorAll('.customer-span');
        elArr.forEach((el) => {
            el.setAttribute('rowspan', 4);
      });
    },
    arraySpanMethodAmount({ row, column, rowIndex, columnIndex }){
      let elArr = document.querySelectorAll('.customer-span');
        elArr.forEach((el) => {
            el.setAttribute('rowspan', 4);
      });
      if (column.property === "name") {
        if (columnIndex === 0) {
          if (rowIndex === 1) {
              var elements = document.getElementsByClassName("vxe-body--column col_86 col--center");
              // console.log(elements,"elements")
              for (var i = 0; i < elements.length; i++) {
                 elements[0].textContent = "正地厅级单位";
              }
              return { rowspan: 4, colspan: 1 };
          } else if (rowIndex === 5) {
              var elements = document.getElementsByClassName("vxe-body--column col_86 col--center");
              for (var i = 0; i < elements.length; i++) {
              elements[1].textContent = "副地厅级单位";
              }
              return { rowspan: 6, colspan: 1 };
          } else if (rowIndex === 11) {
              var elements = document.getElementsByClassName("vxe-body--column col_86 col--center");
              for (var i = 0; i < elements.length; i++) {
                elements[2].textContent = "正县处级单位";
              }
              
              return { rowspan: 4, colspan: 1 };
          } else {
            return { rowspan: 1, colspan: 0 };
          }
        }
      }

      if(column.property === 'cultivateType'){
        if (columnIndex === 1) {
          if (rowIndex === 0 && row.cultivateType ==="可作为副省级城市党政副职培养的干部") {
            return {rowspan:1,colspan:2}
          }
        }
      }
    },
    handlerClickExport(){
      let fileName = '';
      if (this.activeTab == 'first') {
        fileName = '地方党政领导班子优秀年轻干部基本情况'
      } else if (this.activeTab == 'secondOne') {
        fileName = '地方党政领导班子优秀年轻干部年龄情况（一）'
      } else if (this.activeTab == 'secondTwo') {
        fileName = '地方党政领导班子优秀年轻干部年龄情况（二）'
      } else if (this.activeTab == 'third') {
        fileName = '地方党政领导班子优秀年轻干部数量变化情况'
      }
      let params = {
        'fileName': fileName + '.xlsx',
        table:this.activeTab,
      }
      getExportTable(params);
    },
    
  },
};
</script>
<style>

</style>